/** Component: Code Block */
@use './mixins' as *;

:root {
  --custom-code-block-background-color: var(--strapi-neutral-0);
  --custom-code-block-background-color-highlighted: var(--strapi-neutral-500);
  --custom-code-block-color: var(--strapi-neutral-800);
  --custom-code-block-comment-color: var(--strapi-neutral-500);
  --custom-code-block-key-color: var(--strapi-success-600);
  --custom-code-block-keyword-color: var(--strapi-success-700);
  --custom-code-block-number-color: var(--strapi-success-600);
  --custom-code-block-punctuation-color: var(--strapi-neutral-800);
  --custom-code-block-property-color: var(--strapi-success-600);
  --custom-code-block-parameter-color: var(--strapi-neutral-800);
  --custom-code-block-literal-property-color: var(--strapi-secondary-600);
  --custom-code-block-value-color: var(--strapi-neutral-0);
  --custom-code-block-string-color: var(--strapi-primary-600);
  --custom-code-block-function-color: var(--strapi-alternative-600);
  --custom-code-block-plain-color: var(--strapi-neutral-800);
  --custom-code-block-font-size: var(--strapi-font-size-sm);
  --custom-code-block-line-height: var(--strapi-line-height-sm);
  --custom-code-block-title-font-family: font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --custom-code-block-border-color: var(--strapi-neutral-200);
}

pre {
  --ifm-code-border-radius: 6px;
  --ifm-pre-border-radius: 6px;

  background: var(--custom-code-block-background-color);
  color: var(--custom-code-block-color);
  font-size: var(--custom-code-block-font-size);
  line-height: var(--custom-code-block-line-height);

  code {
    --ifm-code-border-radius: 6px;
    background: var(--custom-code-block-background-color);

    line-height: 1.7 !important;

    a {
      --ifm-link-color: var(--strapi-alternative-500);
      --ifm-link-hover-color: var(--strapi-alternative-500);

      font-weight: 700;
    }
  }
}

pre,
.theme-code-block {
  --ifm-scrollbar-track-background-color: var(--strapi-neutral-800);
  --ifm-scrollbar-thumb-background-color: var(--strapi-neutral-700);
  --ifm-scrollbar-thumb-hover-background-color: var(--strapi-neutral-500);

  --prism-background-color: var(--custom-code-block-background-color) !important;
  --prism-color: var(--custom-code-block-color);
  border-radius: var(--strapi-spacing-1);
  box-shadow: none;
}

.theme-code-block {
  border: solid 1px var(--custom-code-block-border-color);

  &-highlighted-line,
  &-highlighted-line [class*="codeLineNumber"] {
    background-color: #E8E8E8;
  }
}

pre.prism-code {
  code {
    .token {
      color: var(--strapi-neutral-800);
      // TODO: define syntax coloring

      &.comment {
        color: var(--custom-code-block-comment-color) !important;
        font-style: italic;
      }

      &.key {
        color: var(--custom-code-block-key-color) !important;
      }

      &.number {
        color: var(--custom-code-block-number-color) !important;
      }

      &.plain {
        color: var(--custom-code-block-plain-color) !important;
      }

      &.property,
      &.inserted {
        color: var(--custom-code-block-property-color) !important;
      }

      &.string {
        color: var(--custom-code-block-string-color) !important;
      }

      &.method,
      &.property-access,
      &.function,
      &.attr-name {
        color: var(--custom-code-block-function-color) !important;
      }

      &.keyword {
        color: var(--custom-code-block-keyword-color) !important;
        font-style: italic;
      }

      &.literal-property {
        color: var(--custom-code-block-literal-property-color) !important;
      }

      &.parameter {
        color: var(--custom-code-block-parameter-color) !important;
      }

      &.operator,
      &.punctuation {
        color: var(--custom-code-block-punctuation-color) !important;
      }

      &.class-name,
      &.known-class-name {
        color: var(--custom-code-block-plain-color) !important;
      }
    }
  }
}

.api-call {
  .theme-code-block {
    [class*="highlighted-line"] {
      background-color: var(--custom-code-block-background-color-highlighted);
    }

    code {
      background-color: var(--custom-code-block-background-color);
    }
  }
}

.theme-code-block {
  &[class*="codeBlockContainer"],
  [class*="codeBlockContainer"] {
    background: var(--custom-code-block-background-color);
    position: relative;

    &:not(:has([class*="codeBlockTitle"])) {
      padding: 24px !important;
      box-shadow: none !important;

      .prism-code {
        background-color: white !important;
        // TODO fix by finding a better way

        code {
          padding: 0;
        }
      }
    }

    svg {
      display: initial;
    }
  }

  [class*="codeBlockTitle"] {
    border-bottom: none;
    color: var(--strapi-neutral-800);
    font-family: var(--custom-code-block-title-font-family);
    background-color: var(--strapi-neutral-100);
    border-bottom: solid 1px var(--custom-code-block-border-color);
    position: relative;

    &:before { // file icon from Phosphor icons
      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(142,142,169)' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM152,88V44l44,44Z'%3E%3C/path%3E%3C/svg%3E");
      position: relative;
      top: 3px;
      margin-right: 8px;
    }
  }

  [class*="codeLineNumber"] {
    position: relative;
    left: 6px;

    &::before {
      color: var(--strapi-neutral-800);
    }

    &::after {
      content: '';
      position: absolute;
      width: 1px;
      height: 100%;
      margin-left: 24px;
      background-color: var(--strapi-neutral-200);
    }
  }

  [class*="codeBlockLines"] {
    border: none;
    position: relative;
  }

  [class*="codeBlockContent"] {
    border-radius: 0;
    border-color: transparent;
    border: none;

    pre.prism-code {
      background-color: var(--strapi-neutral-0) !important;
    }
  }

  [class*="codeLineContent"] {
    margin-left: 32px;
  }

  .clean-btn {
    background-color: white;
    position: relative;
    top: -12px;

    svg,
    i::before {
      color: black;
    }

    span {
      color: black;
    }
  }

  .ai-button {
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 24px;
  }

  &:has([class*="codeBlockTitle"]) {
    .clean-btn {
      top: -50px;
    }

    [class*="codeBlockLines"] {
      border: none;
      position: relative;
    }

    /**
     * Fix style when lines are wrapped
     * No class is added by the JS code of the button;
     * Instead, the button adds inline style,
     * so we're targetting this style
     */
    [style*="pre-wrap"] {
      [class*="codeLineContent"] {
        display: inline-block;
        margin-left: 54px;
      }

      [class*="codeLineNumber"] {
        position: relative;
        left: 6px;

        &::before { // line number
          color: var(--strapi-neutral-800);
          top: 0px;
          position: absolute;
          right: 0px;
        }

        &::after { // border in the gutter
          content: '';
          position: absolute;
          width: 1px;
          height: 100%;
          margin-left: 40px;
          background-color: var(--strapi-neutral-200);
        }
      }
    }

    [class*="codeBlockLines"]:has([class*="codeLineNumber"]) {
      /**
       * Adding border below title to simulate border continuity
       * because each code line has its own 'gutter' border
       */
      &::after {
        content: '';
        width: 1px;
        height: 20px;
        background-color: var(--strapi-neutral-200);
        position: absolute;
        top: -4px;
        left: 62px;
      }
    }
  }
}

// Desktop: Button opacity behavior
[class*="buttonGroup"],
.ai-button-group {
  opacity: 0;
  transition: opacity 0.2s ease;
}

[class*="codeBlock"]:hover {
  [class*="buttonGroup"],
  .ai-button-group {
    opacity: 1;
    
    .clean-btn {
      opacity: 1 !important;
      
      svg,
      i::before,
      span {
        opacity: 0.6;
        transition: opacity 0.2s ease;
      }
    }
  }
}

.clean-btn:hover {
  svg,
  i::before,
  span {
    opacity: 1 !important;
  }
}

// Mobile: Always visible
@include medium-down {
  [class*="buttonGroup"],
  [class*="buttonGroup"] .clean-btn,
  .ai-button-group,
  .ai-button-group .clean-btn {
    opacity: 1 !important;
  }

  [class*="buttonGroup"],
  .ai-button-group {
    .clean-btn {
      svg,
      i::before,
      span {
        opacity: 1 !important;
      }
    }
  }

  // Align buttons to the left on mobile
  [class*="buttonGroup"],
  .ai-button-group {
    right: auto;
    left: 16px;
  }

  [class*="codeBlockTitle"] {
    padding-right: 84px;
  }

  // On mobile: always add padding-top (with or without title)
  .theme-code-block {
    &[class*="codeBlockContainer"],
    [class*="codeBlockContainer"] {
      [class*="codeBlockContent"] {
        padding-top: 48px;
      }
    }

    // Reset button position on mobile (don't put them in title bar)
    &:has([class*="codeBlockTitle"]) {
      .clean-btn {
        top: 8px;
      }
    }
  }
}

/** Dark theme */
@include dark {
  --custom-code-block-background-color: transparent;
  --custom-code-block-background-color-highlighted: var(--strapi-neutral-300);
  --custom-code-block-color: var(--strapi-neutral-1000);
  --custom-code-block-punctuation-color: var(--strapi-primary-200);
  --custom-code-block-value-color: var(--strapi-neutral-900);
  --custom-code-block-keyword-color: var(--strapi-code-purple);
  --custom-code-block-key-color: var(--strapi-success-300);
  --custom-code-block-number-color: var(--strapi-code-green);
  --custom-code-block-property-color: var(--strapi-code-light-green);
  --custom-code-block-literal-property-color: var(--strapi-code-light-green);
  --custom-code-block-string-color: var(--strapi-code-rose);
  --custom-code-block-function-color: var(--strapi-code-fluo-green);

  pre,
  .theme-code-block {
    --ifm-scrollbar-track-background-color: var(--strapi-neutral-200);
    --ifm-scrollbar-thumb-background-color: var(--strapi-neutral-300);
  }

  .clean-btn {
    background-color: var(--strapi-neutral-0);

    svg,
    i::before,
    span {
      color: var(--strapi-neutral-900);
    }
  }

  .theme-code-block {
    &[class*="codeBlockContainer"],
    [class*="codeBlockContainer"] {
      &:not(:has([class*="codeBlockTitle"])) {
        .prism-code {
          background-color: var(--strapi-neutral-0) !important;
          // TODO fix by finding a better way
        }
      }
    }
    &-highlighted-line [class*="codeLineNumber"],
    &-highlighted-line {
      background-color: #11111B !important;
    }
  }

  .theme-code-block {
    &[class*="codeBlockContainer"],
    [class*="codeBlockContainer"] {
      &:not(:has([class*="codeBlockTitle"])) {
        border: solid 1px var(--strapi-neutral-200);
      }
    }
  }
}